<template>
  <div class="relation-wrapper clearfix">
    <figure class="card-ui">
      <figcaption>
        <div class="cui-title">
          <h3>Relation Deals</h3>
        </div>
      </figcaption>
      <div class="cui-content-holder">
        <div class="card-content">
          <div class="card-wrapper clearfix">
            <figure class="card-item" v-for="(item, index) in deals" :key="index">
              <a href="javascript:;" @click="toRelationDeal(item)">
                <relation-product :data="item"></relation-product>
              </a>
            </figure>
          </div>
        </div>
        <a class="cui-arrow-previous cui-arrow" @click="swipeLeft" alt="Previous">
          <i class="material-icons">
            keyboard_arrow_left
          </i>
        </a>
        <a class="cui-arrow-next cui-arrow" @click="swipeRight" alt="Next">
          <i class="material-icons">
            keyboard_arrow_right
          </i>
        </a>
      </div>
    </figure>
  </div>
</template>

<script type="text/ecmascript-6">
  const SINGLEWIDTH = 270
  import RelationProduct from './relation-product'
  import {mapMutations} from 'vuex'
    export default {
      props: {
        deals: {
          type: Array,
          default: function() {
            return []
          }
        }
      },
      data() {
        return {

        }
      },
      mounted() {
        $('.card-wrapper').css('width', SINGLEWIDTH * this.deals.length + 'px')
        if (this.deals.length <=4) {
          $('.cui-arrow-next').hide()
        }
      },
      methods: {
        swipeLeft() {
          if (this.deals.length <= 4) return
          $('.card-wrapper').animate({left: 0})
          $('.cui-arrow-previous').fadeOut()
          $('.cui-arrow-next').fadeIn()
        },
        swipeRight() {
          if (this.deals.length <= 4) return
          let l = - SINGLEWIDTH * (this.deals.length - 4) + 'px'
          $('.card-wrapper').animate({left: l})
          $('.cui-arrow-previous').fadeIn()
          $('.cui-arrow-next').fadeOut()
        },
        toRelationDeal(item) {
          let path = this.$router.currentRoute.fullPath.split('/')
          this.$router.push({
            path: `/${path[1]}/${item.urlKeyWords}/${item.sku}`
          })
          this.setProductSku(item.sku)
          this.$emit('forceUpdate')
        },
        ...mapMutations({
          setProductSku: 'SET_FEATURED_LIST'
        })
      },
      components: {
        RelationProduct
      },
      watch: {
        deals() {
          $('.card-wrapper').css('width', SINGLEWIDTH * this.deals.length + 'px')
          if (this.deals.length <=4) {
            $('.cui-arrow-next').hide()
          }
        }
      }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .relation-wrapper
    margin: 0 auto
    max-width: 1080px
    width: 100%
    .card-ui
      box-sizing: border-box
      float: left
      margin: 0 0 20px
      position: relative
      width: 100%
      color: #75787b
      font-size: 14px
      font-weight: 400
      line-height: 1.5
      .cui-title
        padding-left 20px
        > h3
          font-size: 18px
          font-weight: 600
          color: #333
          line-height: 1.2
          margin: 10px 0 18px
      .cui-content-holder
        position: relative
        width: 100%
        .card-content
          overflow: hidden
          position: relative
          .card-wrapper
            position: relative
            .card-item
              display: inline-block
              width: 270px
              font-size: 14px
              white-space: normal
              vertical-align: top
              box-sizing: border-box
              margin: 0 0 20px
              padding: 0 10px
              position: relative
        .cui-arrow
          padding: 7px 13px
          width: 40px
          height: 40px
          background-color: #fff
          box-shadow: 0 2px 4px 0 rgba(0,0,0,.1)
          border: solid 1px #E0E3E4
          border-radius: 20px
          box-sizing: border-box
          line-height: 1.5
          position: absolute
          top: 38%
          cursor: pointer
          text-decoration: none
          text-shadow: #fff 1px 1px 1px
          > i
            color: #18823a
            position: relative;
            left: -5px;
        .cui-arrow-next
          right: -13px
        .cui-arrow-previous
          display: none
          left: -13px
</style>
